<!DOCTYPE html mobile>
<meta charset=utf-8>
<style>
	body { font: 18px/1 Source Han Sans HW; text-align: center; display: flex; }
	hr { margin: 0 1em; border: dashed silver 1px; }

	body > .ruby { display: grid; grid-template-columns: auto auto; }
	.ruby > * { display: flex; justify-content: center; }
	.rb { font-size: 200%; }
	.A { color: orange; }
	i { font: inherit; border: solid 1px silver; margin: -0.5px; }
</style>

<div class=ruby>
	<div class="rb"><i class=A>上</i><i class=B>手</i></div>
	<div class="rt" style="grid-row: 2"><i class=A>じ</i><i class=A>ょ</i><i class=A>う</i><i class=B>ず</i></div>
</div>

<hr>

<div class=ruby>
	<div class="rb"><i class=A>下</i><i class=B>手</i></div>
	<div class="rt" style="grid-row: 2"><i class=A>へ</i><i class=B>た</i></div>
</div>
